<template>
  <div>
    <el-card shadow="never" class="ivu-mt" :body-style="{padding:0}">
      <div class="padding-add">
        <el-form
            ref="curlFrom"
            :model="from"
            :label-width="labelWidth"
            :label-position="labelPosition"
            inline
            @submit.native.prevent
        >
          <el-form-item label="商家名称：" label-for="name">
            <el-input
                v-model="from.name"
                placeholder="请输入商家名称"
                class="form_content_width"
            />
          </el-form-item>

          <el-form-item label="手机号：" label-for="phone">
            <el-input
                v-model="from.phone"
                placeholder="请输入手机号"
                class="form_content_width"
            />
          </el-form-item>

          <el-form-item label="地址：" label-for="address">
            <el-input
                v-model="from.address"
                placeholder="请输入地址"
                class="form_content_width"
            />
          </el-form-item>

          <el-form-item label="申请人：" label-for="apply_id">
            <el-input
                v-model="from.apply_id"
                placeholder="请输入申请人"
                class="form_content_width"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="searchs">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card shadow="never" dis-hover class="ivu-mt mt16">
      <el-row type="flex">
        <el-col v-bind="grid">
          <el-button v-auth="['merchant-add']" type="primary" icon="md-add" @click="add">添加</el-button>
        </el-col>
      </el-row>
      <el-table
          :data="dataList"
          ref="table"
          class="mt25"
          :loading="loading"
          highlight-current-row
      >
        <el-table-column prop="name" label="商家名称">
        </el-table-column>
        <el-table-column prop="phone" label="手机号">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column label="营业执照">
          <template slot-scope="scope">
            <div class="tabBox_img" v-viewer>
              <img v-lazy="img" v-for="img in scope.row.business_image_label"/>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="宣传照片">
          <template slot-scope="scope">
            <div class="tabBox_img" v-viewer>
              <img v-lazy="scope.row.publicity_image"/>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="status_label" label="审核状态">
        </el-table-column>
        <el-table-column prop="charge" label="手续费">
        </el-table-column>
        <el-table-column prop="weight" label="权重">
        </el-table-column>
        <el-table-column prop="balance" label="余额">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <a @click="show(scope.row)">详情</a>
            <el-divider direction="vertical"/>
            <a @click="edit(scope.row.id)">修改</a>
            <el-divider direction="vertical"/>
            <a @click="editOther(scope.row.id)">修改其他</a>
            <el-divider direction="vertical"/>
            <a @click="del(scope.row, '删除', scope.$index)">删除</a>
            <el-divider direction="vertical"/>
            <a @click="merSettle(scope.row, '商户结算', scope.$index)">商户结算</a>
            <el-divider direction="vertical"/>
            <a @click="receive(scope.row)">余额记录</a>
            <el-divider direction="vertical"/>
            <a @click="receive3(scope.row)">结算记录</a>
<!--            <el-divider direction="vertical"/>-->
<!--            <a @click="receive4(scope.row)">结算订单记录</a>-->
          </template>
        </el-table-column>
      </el-table>
      <div class="acea-row row-right page">
        <pagination :total="total" @pagination="pageChange" :limit.sync="from.limit" :page.sync="from.page"/>
      </div>
    </el-card>

    <el-dialog title="查看详情" :visible.sync="dialogTableVisible" v-if='dialogTableVisible'>
      <el-descriptions title="merchant">
        <el-descriptions-item label="自增ID">{{ info.id }}</el-descriptions-item>
        <el-descriptions-item label="商家名称">{{ info.name }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ info.phone }}</el-descriptions-item>
        <el-descriptions-item label="地址">{{ info.address }}</el-descriptions-item>
        <el-descriptions-item label="申请人ID">{{ info.apply_id }}</el-descriptions-item>
        <el-descriptions-item label="营业执照">
          <el-image v-for="item in info.business_image_label" :src="item"
                    :preview-src-list="info.business_image_label"/>
        </el-descriptions-item>
        <el-descriptions-item label="宣传照片">
          <el-image :src="info.publicity_image" :preview-src-list="info.publicity_image"/>
        </el-descriptions-item>
        <el-descriptions-item label="审核状态">{{ info.status_label }}</el-descriptions-item>
        <el-descriptions-item label="手续费">{{ info.charge }}</el-descriptions-item>
        <el-descriptions-item label="权重">{{ info.weight }}</el-descriptions-item>
        <el-descriptions-item label="余额">{{ info.balance }}</el-descriptions-item>
        <el-descriptions-item label="添加时间">{{ info.create_time }}</el-descriptions-item>
        <el-descriptions-item label="修改时间">{{ info.update_time }}</el-descriptions-item>
        <el-descriptions-item label="伪删除">{{ info.delete_time }}</el-descriptions-item>

      </el-descriptions>
    </el-dialog>


    <!-- 余额记录 -->
    <el-dialog :visible.sync="modals2" title="余额记录" :close-on-click-modal="false" width="720px">
      <el-table
          :data="receiveList2"
          ref="table"
          v-loading="loading2"
          highlight-current-row
          height="500"
          width="800"
          no-userFrom-text="暂无数据"
          no-filtered-userFrom-text="暂无筛选结果"
      >
        <el-table-column label="流水单号" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.log_sn }}</span>
          </template>
        </el-table-column>
        <el-table-column label="来源单号" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.source_sn }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变动总数" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.change_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="剩余总数" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.left_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变动" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.change_type==1?"增加":"减少" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变动时间" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.create_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变动备注" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 结算记录 -->
    <el-dialog :visible.sync="modals3" title="结算记录" :close-on-click-modal="false" width="720px">
      <el-table
          :data="receiveList3"
          ref="table"
          v-loading="loading3"
          highlight-current-row
          height="500"
          width="800"
          no-userFrom-text="暂无数据"
          no-filtered-userFrom-text="暂无筛选结果"
      >
        <el-table-column label="结算单号" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.settle_sn }}</span>
          </template>
        </el-table-column>
        <el-table-column label="已结算成交订单数" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.deal_order_count }}</span>
          </template>
        </el-table-column>
        <el-table-column label="已结算营业额" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.business_money }}</span>
          </template>
        </el-table-column>
        <el-table-column label="入账金额" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.entry_account_money }}</span>
          </template>
        </el-table-column>
        <el-table-column label="交易总费" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.trade_service_fee }}</span>
          </template>
        </el-table-column>
        <el-table-column label="交易费比例" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.trade_service_ratio }}</span>
          </template>
        </el-table-column>
        <el-table-column label="变动时间" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.create_time }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <!-- 结算订单记录 -->
    <el-dialog :visible.sync="modals4" title="结算订单记录" :close-on-click-modal="false" width="720px">
      <el-table
          :data="receiveList4"
          ref="table"
          v-loading="loading4"
          highlight-current-row
          height="500"
          width="800"
          no-userFrom-text="暂无数据"
          no-filtered-userFrom-text="暂无筛选结果"
      >
        <el-table-column label="结算编号" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.settle_sn }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单编号" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.order_sn }}</span>
          </template>
        </el-table-column>
        <el-table-column label="入账金额" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.entry_account_amount }}</span>
          </template>
        </el-table-column>
        <el-table-column label="服务费比例" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.trade_service_ratio }}</span>
          </template>
        </el-table-column>

        <el-table-column label="结算时间" min-width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.create_time }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import {mapState} from 'vuex';
import {
  merchantSaveApi,
  merchantStatusApi,
  merchantDeleteApi,
  merchantUpdateApi,
  getMerchantCreateApi,
  getMerchantEditApi,
  getMerchantListApi,
  getMerchantReadApi, shopAccountLogApi, shopSettlementApi, ShopSettlementRecordApi, getMerchantEditOtherApi
} from '@/api/crud/merchant';
import {releasedissueLogApi} from "@api/marketing";

export default {
  name: 'merchant',
  data() {
    return {
      modals2: false,
      modals3: false,
      modals4: false,
      loading2: false,
      loading3: false,
      loading4: false,
      total2: 0,
      total3: 0,
      total4: 0,
      rows: {},
      receiveList2:[],
      receiveList3:[],
      receiveList4:[],
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      loading: false,
      from: {
        name: '',
        phone: '',
        address: '',
        apply_id: '',
        page: 1,
        limit: 15,
      },
      dataList: [],
      total: 0,
      dialogTableVisible: false,
      info: {},
      receiveFrom: {
        page: 1,
        limit: 15,
      },
    };
  },
  computed: {
    ...mapState('media', ['isMobile']),
    labelWidth() {
      return this.isMobile ? undefined : '75px';
    },
    labelPosition() {
      return this.isMobile ? 'top' : 'left';
    },
  },
  created() {
    this.getList();
  },
  methods: {
    show(row) {
      getMerchantReadApi(row.id).then(res => {
        this.dialogTableVisible = true;
        this.info = res.data;
      }).catch(res => {
        this.$Message.error(res.msg);
      })
    },
    //修改状态
    updateStatus(row, field) {
      merchantStatusApi(row.id, {field: field, value: row[field]})
          .then(async (res) => {
            this.$message.success(res.msg);
          })
          .catch((res) => {
            this.$message.error(res.msg);
          });
    },
    // 添加
    add() {
      this.$modalForm(getMerchantCreateApi()).then(() => this.getList());
    },
    // 表格搜索
    searchs() {
      this.from.page = 1;
      this.getList();
    },
    //列表
    getList() {
      this.loading = true;
      getMerchantListApi(this.from)
          .then(async (res) => {
            let data = res.data;
            this.dataList = data.list;
            this.total = data.count;
            this.loading = false;
          })
          .catch((res) => {
            this.loading = false;
            this.$Message.error(res.msg);
          });
    },
    //分页
    pageChange(index) {
      this.from.page = index;
      this.getList();
    },
    // 修改
    edit(id) {
      this.$modalForm(getMerchantEditApi(id)).then(() => this.getList());
    },
    // 其他
    editOther(id) {
      this.$modalForm(getMerchantEditOtherApi(id)).then(() => this.getList());
    },
    // 删除
    del(row, tit, num) {
      let delfromData = {
        title: tit,
        num: num,
        url: `crud/merchant/${row.id}`,
        method: 'DELETE',
        ids: '',
      };
      this.$modalSure(delfromData)
          .then((res) => {
            this.$message.success(res.msg);
            this.getList();
          })
          .catch((res) => {
            this.$message.error(res.msg);
          });
    },
    //商户结算
    merSettle(row, tit, num) {
      let merSettle = {
        title: tit,
        num: num,
        url: `crud/merchant/mer_settle/${row.id}`,
        method: 'POST',
        ids: '',
      };
      this.$modalSure(merSettle)
          .then((res) => {
            this.$message.success(res.msg);
            this.getList();
          })
          .catch((res) => {
            this.$message.error(res.msg);
          });
    },
    // 余额记录
    receive(row) {
      this.modals2 = true;
      this.rows = row;
      this.getReceivelist(row);
    },
    getReceivelist(row) {
      this.loading2 = true;
      const resp=this.receiveFrom;
      resp['shop_id']=row.id;
      shopAccountLogApi(resp)
          .then(async (res) => {
            let data = res.data;
            this.receiveList2 = data.list;
            this.total2 = res.data.count;
            this.loading2 = false;
          })
          .catch((res) => {
            this.loading2 = false;
            this.$message.error(res.msg);
          });
    },
    //结算记录
    receive3(row) {
      this.modals3 = true;
      this.rows = row;
      this.getReceivelist3(row);
    },
    getReceivelist3(row) {
      this.loading3 = true;
      const resp=this.receiveFrom;
      resp['shop_id']=row.id;
      shopSettlementApi(resp)
          .then(async (res) => {
            let data = res.data;
            this.receiveList3 = data.list;
            this.total3 = res.data.count;
            this.loading3 = false;
          })
          .catch((res) => {
            this.loading3 = false;
            this.$message.error(res.msg);
          });
    },
    //结算订单记录
    receive4(row) {
      this.modals4 = true;
      this.rows = row;
      this.getReceivelist4(row);
    },
    getReceivelist4(row) {
      this.loading4 = true;
      const resp=this.receiveFrom;
      resp['shop_id']=row.id;
      ShopSettlementRecordApi(resp)
          .then(async (res) => {
            let data = res.data;
            this.receiveList4 = data.list;
            this.total4 = res.data.count;
            this.loading4 = false;
          })
          .catch((res) => {
            this.loading4 = false;
            this.$message.error(res.msg);
          });
    },
  },
};
</script>

<style scoped lang="stylus"></style>
